<template>
  <view class="dy-scroll-container">
    <dy-navbar title="日历面板" />
    <scroll-view class="dy-scroll" scroll-y="">
      <!-- 基础用法 -->
      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="基础用法" />
        <template slot="body">
          <dy-calendar-panel v-model="base.value" />
        </template>
      </dy-card>
      <!-- 双向绑定 -->
      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="双向绑定" />
        <template slot="body">
          <dy-calendar-panel v-model="sync.value" />
        </template>
        <view slot="footer" class=" dy-align-center">
          <dy-input v-model="sync.value" class="dy-flex-sub" />
          <dy-button type="primary" size="small">同步时间</dy-button>
        </view>
      </dy-card>
      <!-- 范围选择 -->
      <dy-card padding="0">
        <dy-section slot="title" padding="24" title="范围选择" />
        <template slot="body">
          <dy-calendar-panel v-model="range.value" type="range" />
        </template>
      </dy-card>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'Canlendar',
  data() {
    return {
      base: {
        value: '2019-08-11'
      },
      sync: {
        value: '2019-08-11'
      },
      range: {
        value: ['2019-08-11', '2019-08-28']
      }
    }
  },
  methods: {}
}
</script>
